<template>
  <a-form-item labelCol="labelCol" class="jeecg-online-search">
    <template v-if="item.view == 'date'">
      <a-date-picker
        v-if="single_mode === item.mode"
        style="width: 100%"
        :showTime="false"
        valueFormat="YYYY-MM-DD"
        :placeholder="请选择 + item.label"
        v-model:value="innerValue"
      />
      <template v-else>
        <a-date-picker style="calc(50% - 15px)" :showTime="false" valueFormat="YYYY-MM-DD" :placeholder="开始日期" v-model:value="beginValue" />
        <span class="group-query-strig">~</span>
        <a-date-picker style="calc(50% - 15px)" :showTime="false" valueFormat="YYYY-MM-DD" :placeholder="结束日期" v-model:value="endValue" />
      </template>
    </template>
    <template v-else-if="single_mode === item.mode">
      <a-date-picker
        v-if="single_mode === item.mode"
        style="width: 100%"
        :showTime="true"
        valueFormat="YYYY-MM-DD hh:mm:ss"
        :placeholder="请选择 + item.label"
        v-model:value="innerValue"
      />
      <template v-else>
        <a-date-picker
          style="calc(50% - 15px)"
          :showTime="true"
          valueFormat="YYYY-MM-DD hh:mm:ss"
          :placeholder="开始日期"
          v-model:value="beginValue"
        />
        <span class="group-query-strig">~</span>
        <a-date-picker style="calc(50% - 15px)" :showTime="true" valueFormat="YYYY-MM-DD hh:mm:ss" :placeholder="结束日期" v-model:value="endValue" />
      </template>
    </template>
    <template v-else-if="isEasySelect()">
      <JDictSelectTag v-if="item.config === '1'" :placeholder="'请选择' + item.label" v-model:value="innerValue" :dictCode="getDictCode()" />
      <a-select v-else :placeholder="请选择 + item.label" v-model:value="innerValue">
        <template v-for="(obj, index) in dictOptions[getDictOptionKey(item)]" :key="index" >
          <a-select-option v-model:value="obj.value">{{ obj.text }}</a-select-option>
        </template>
      </a-select>
    </template>
    <template v-else-if="item.view === 'sel_tree'">
      <JDictSelectTag
        :placeholder="请选择 + _item.label"
        v-model:value="innerValue"
        :dict="item.dict"
        :pidField="item.pidField"
        :pidValue="item.pidValue"
        :hasChildField="item.hasChildField"
        load-triggle-change
      />
    </template>
    <template v-else-if="item.view === 'cat_tree'">
      <JCategorySelect
        @change="handleCategoryTreeChange"
        :loadTriggleChange="true"
        :pcode="item.pcode"
        v-model:value="innerValue"
        :placeholder="请选择 + item.label"
      />
    </template>
    <template v-else-if="item.view === 'sel_search'">
      <JDictSelectTag v-if="item.config === '1'" v-model:value="innerValue" :placeholder="请选择 + item.label" :dict="getDictCode()" />
      <JOnlineSearchSelect v-else :value="innerValue" :placeholder="请选择 + item.label" :sql="getSqlByDictCode()" />
    </template>
    <template v-else-if="item.view === 'sel_user'">
      <JSelectUser v-bind="userSelectProp" v-model:value="innerValue" :placeholder="请选择 + item.label" />
    </template>
    <template v-else-if="item.view === 'sel_depart'">
      <JSelectDept v-bind="depSelectProp" :showButton="false" v-model:value="innerValue" :placeholder="请选择 + item.label" />
    </template>
    <template v-else-if="item.view === 'popup'">
      <JPopup
        :placeholder="请选择 + _ctx.item.label"
        v-model:value="innerValue"
        :code="item.dictTable"
        :setFieldsValue="setFieldsValue"
        :field-config="getPopupFieldConfig(item)"
        :multi="true"
      />
    </template>
    <template v-else-if="item.view === 'pca'">
      <JAreaSelect :placeholder="请选择 + item.label" v-model:value="innerValue" />
    </template>
    <template v-else-if="item.view == 'checkbox' || item.view == 'list_multi'">
      <JSelectMultiple :dictCode="getDictCode()" :placeholder="请选择 + item.label" v-model:value="innerValue" />
    </template>
    <template v-else>
      <a-input v-if="single_mode === item.mode" :placeholder="请选择 + item.label" v-model:value="innerValue" />
      <template v-else>
        <a-input placeholder="开始值" v-model:value="beginValue" style="width: calc(50% - 15px)" />
        <span class="group-query-strig">~</span>
        <a-input placeholder="结束值" v-model:value="endValue" style="width: calc(50% - 15px)" />
      </template>
    </template>
  </a-form-item>
</template>
<script lang="ts">
  import { defineComponent, ref, watch } from 'vue';
  import {
    JDictSelectTag,
    JTreeSelect,
    JCategorySelect,
    JSelectUser,
    JSelectUserByDept,
    JSelectDept,
    JPopup,
    JAreaLinkage,
    JAreaSelect,
    JSelectMultiple,
  } from '/@/components/Form';
  import JOnlineSearchSelect from './JOnlineSearchSelect.vue';

  export default defineComponent({
    name: 'OnlineSearchFormItem',
    components: {
      JOnlineSearchSelect,
      JDictSelectTag,
      JTreeSelect,
      JCategorySelect,
      JSelectUser,
      JSelectUserByDept,
      JSelectDept,
      JPopup,
      JAreaLinkage,
      JAreaSelect,
      JSelectMultiple,
    },
    props: {
      value: {
        type: String,
        default: '',
      },
      item: {
        type: Object,
        default: () => {},
        required: true,
      },
      dictOptions: {
        type: Object,
        default: () => {},
        required: false,
      },
      onlineForm: {
        type: Object,
        default: () => {},
        required: false,
      },
    },
    emits: ['update:value', 'change'],
    setup(props, { emit }) {
      const labelTextMaxWidth = '120px';
      const labelCol = {
        style: {
          'max-width': labelTextMaxWidth,
        },
      };
      const single_mode = 'single';
      let innerValue = ref('');
      let beginValue = ref('');
      let endValue = ref('');
      watch(
        () => props.value,
        () => {
          if (isEasySelect()) {
            innerValue.value = !!props.value ? props.value : void 0;
          } else {
            innerValue.value = props.value;
          }
          if (!props.value) {
            beginValue.value = '';
            endValue.value = '';
          }
        },
        { deep: true, immediate: true }
      );
      watch(
        innerValue,
        (newVal) => {
          console.log('innerValue-change', newVal);
          emit('update:value', newVal);
        },
        { immediate: true }
      );
      watch(beginValue, (newVal) => {
        emit('change', props.item.field + '_begin', newVal);
        emit('update:value', '1');
      });
      watch(endValue, (newVal) => {
        emit('change', props.item.field + '_end', newVal);
        emit('update:value', '1');
      });
      function getDictOptionKey(item) {
        console.log('ddictOptions', props.dictOptions);
        if (item.dbField) {
          return item.dbField;
        } else {
          return item.field;
        }
      }
      function isEasySelect() {
        let item = props.item;
        if (!item) {
          return false;
        }
        return item.view == 'list' || item.view == 'radio' || item.view == 'switch';
      }
      function getDictCode() {
        let item = props.item;
        if (item.dictTable && item.dictTable.length > 0) {
          return item.dictTable + ',' + item.dictText + ',' + item.dictCode;
        } else {
          return item.dictCode;
        }
      }
      function getSqlByDictCode() {
        let item = props.item;
        let { dictTable, dictCode, dictText } = item;
        let temp = dictTable.toLowerCase();
        let arr = temp.split('where');
        let condition = '';
        if (arr.length > 1) {
          condition = ' where' + arr[1];
        }
        let sql = 'select ' + dictCode + " as 'value', " + dictText + " as 'text' from " + arr[0] + condition;
        console.log('sql', sql);
        return sql;
      }
      function getPopupFieldConfig(item) {
        let { dictText: destFields, dictCode: orgFields } = item;
        if (!destFields || destFields.length == 0) {
          return [];
        }
        let arr1 = destFields.split(',');
        let arr2 = orgFields.split(',');
        let config = [];
        for (let i = 0; i < arr1.length; i++) {
          config.push({
            target: arr1[i],
            source: arr2[i],
          });
        }
        return config;
      }
      function setFieldsValue(values) {
        let { dictText: destFields } = props.item;
        let arr1 = destFields.split(',');
        let field = arr1[0];
        emit('change', field, values[field]);
      }
      function handleCategoryTreeChange(value) {
        emit('update:value', value);
      }
      function getComponentProps(item, labelKey, rowKey) {
        let props2 = {
          labelKey,
          rowKey,
        };
        let fieldExtendJson = item.fieldExtendJson;
        if (fieldExtendJson) {
          if (typeof fieldExtendJson == 'string') {
            let json = JSON.parse(fieldExtendJson);
            let extend = Object.assign({}, json);
            if (extend.text) {
              props2['labelKey'] = extend.text;
            }
            if (extend.store) {
              props2['rowKey'] = extend.store;
            }
          }
        }
        return props2;
      }
      let userSelectProp = getComponentProps(props.item, 'realname', 'username');
      console.log('userSelectProp', userSelectProp);
      let depSelectProp = getComponentProps(props.item, 'departName', 'id');
      function handleSelectChange(array) {
        if (array && array.length > 0) {
          emit('update:value', array.join(','));
        } else {
          emit('update:value', '');
        }
      }
      return {
        getPopupFieldConfig,
        userSelectProp,
        depSelectProp,
        handleSelectChange,
        setFieldsValue,
        innerValue,
        beginValue,
        endValue,
        isEasySelect,
        getDictOptionKey,
        getDictCode,
        labelTextMaxWidth,
        labelCol,
        single_mode,
        getSqlByDictCode,
        handleCategoryTreeChange,
      };
    },
  });
</script>
<style scoped>
  .group-query-strig {
    width: 30px;
    text-align: center;
    display: inline-block;
  }

  .jeecg-online-search .ant-form-item-label {
    flex: 0 0 auto !important;
    width: auto;
  }

  .jeecg-online-search .ant-form-item-control {
    max-width: 100%;
    padding-right: 16px;
  }

  .jeecg-online-search .label-text {
    max-width: var(--1e41a56d);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow-wrap: break-word;
  }
</style>
